<template>
    <div>
        <div class="box" v-if="loading">
            <div><h3>安装环境检测</h3></div>
            <i v-loading="loading"></i>
        </div>
        <div class="box" v-else>
            <h3>安装要求</h3>
            <div style="width: 100%;">
                <template v-for="item in required">
                    <div style="margin-bottom: 5px;">
                        <el-alert
                                :title="item.text"
                                type="success"
                                :closable="false"
                                v-if="item.ok"
                        >
                        </el-alert>
                        <el-alert
                                :title="item.text"
                                type="error"
                                :closable="false"
                                v-else
                        >
                        </el-alert>
                    </div>
                </template>
            </div>
            <div><el-button v-show="required.filter((val)=>{return !val.ok}).length < 1" @click="$router.app.$emit('next')">点击继续</el-button></div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"step_1",
        methods:{
        },
        mounted(){
            this.$http.get(this.$_URL,{
                params:{do:'Check'}})
                .then((res)=>{

                    if(res.body.error){
                        this.$message.error(res.body.error)
                    }else{
                        this.required = res.body.required
                    }
                    this.loading = false;
                },(err)=>{
                    this.$message.error("请求失败！")
                    this.loading = false;
                })
        },
        data:function () {
            return {
                loading:true,
                required:[]
            }
        }
    }

</script>

<style>
    .req{
        list-style-type: none;
    }
    .box{
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
</style>